window.addEventListener("load",function (){
    var dbox=document.querySelector(".Sbox")
    var xbox=document.querySelector(".Bbox")
    var meng=document.querySelector(".Sbox span")
    var ximg=document.querySelector(".Bbox img")
    //第一步、、鼠标进入大盒子显示蒙层和小盒子，鼠标移出再隐藏
    dbox.addEventListener("mouseover",function(){
        meng.style.display="block"
        xbox.style.display="block"
    })
    dbox.addEventListener("mouseout",function(){
        meng.style.display="none"
        xbox.style.display="none"
    })
    //第二步、、设置蒙层的移动
    dbox.addEventListener("mousemove",function(e){
        var x=e.pageX-this.offsetLeft
        var y=e.pageY-this.offsetTop
        // console.log(x,y);
        var mengx=x-meng.offsetWidth/2
        var mengy=y-meng.offsetHeight/2
        //遮挡层最大移动距离
        var mengmax=dbox.offsetWidth-meng.offsetWidth
        if(mengx<=0){
            mengx=0
        }else if(mengx>=dbox.offsetWidth-meng.offsetWidth){
            mengx=dbox.offsetWidth-meng.offsetWidth
        }
         if(mengy<=0){
            mengy=0
        }else if(mengy>=dbox.offsetHeight-meng.offsetHeight){
            mengy=dbox.offsetHeight-meng.offsetHeight
        } 
        meng.style.left=mengx+dbox.offsetLeft+"px"
        meng.style.top=mengy+dbox.offsetTop+"px"
        //3.大图的移动距离=遮挡层移动距离 * 大图最大移动距离 / 遮挡层最大移动距离
        
        //大图的最大移动距离：
        var ximgmax=ximg.offsetWidth-xbox.offsetWidth
        var bigx=mengx*ximgmax/mengmax
        var bigy=mengy*ximgmax/mengmax
        ximg.style.left=-bigx+"px"
        ximg.style.top=-bigy+"px"
    })
})

let arr = ["https://ssl4.sephorastatic.cn/products/4/7/4/2/5/7/1_n_10212_640x640.jpg","https://ssl1.sephorastatic.cn/products/4/7/4/2/5/7/2_n_10212_640x640.jpg","https://ssl3.sephorastatic.cn/products/4/7/4/2/5/7/3_n_10212_640x640.jpg","https://ssl1.sephorastatic.cn/products/4/7/4/2/5/7/4_n_10212_640x640.jpg","https://ssl2.sephorastatic.cn/products/4/7/4/2/5/7/5_n_10212_640x640.jpg"];
let b = document.querySelectorAll(".b");
let d = document.querySelector(".d img");
let c = document.querySelector(".c img");

for(let i = 0;i<b.length;i++){
    b[i].onclick = function(){
        c.src = arr[i];
        d.src = arr[i];
    
    }
}

var addCartButton =  document.querySelector(".addCartButton")
addCartButton.onclick=function(){
    const goodsMsg= localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")):[];
    console.log(location.href)
    console.log(location.href(-7,-1))
}